<template>
  <div>
    <!-- 消息页面的顶部导航 -->
    <van-nav-bar
      title="消息"
      fixed
      @click-left="openLeftPopup"
      @click-right="openTopPopup_search"
      class="headers"
    >
      <template #left>
        <van-icon name="user-circle-o" size="22" />
      </template>
      <template #right>
        <van-icon name="search" size="22" />
      </template>
    </van-nav-bar>
    <!-- 
        消息的主体内容
        1.评论和回复的查看
        2.私信的预览
    -->
    <div class="main-container">
      <!--  1.评论和回复的查看 -->
      <van-row class="message-nav" fixed justify="center" align="center">
        <van-col class="message-nav-item" span="11">回复</van-col>
        <van-col class="message-nav-item" span="2">|</van-col>
        <van-col class="message-nav-item" span="11">动态</van-col>
      </van-row>
      <!-- 私信预览 -->
      <div class="message-list">
      <my-message-card friendname="Craipy" message="来啊！" time="1天前"></my-message-card>
      <my-message-card friendname="Craipy" message="快活啊！" time="1天前"></my-message-card>
      <my-message-card friendname="Craipy" message="反正有！" time="1天前"></my-message-card>
      <my-message-card friendname="Craipy" message="大把时光！" time="1天前"></my-message-card>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import MyMessageCard from './base/MyMessageCard'
export default {
  name: 'Release',
  data() {
    return {}
  },
  methods: {
    ...mapMutations(['openLeftPopup', 'openTopPopup_search'])
  },
  components: {
    'my-message-card': MyMessageCard
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.message-nav {
  /* top: 10px; */
  /* position: relative; */
  height: 60px;
  background-color: white;
  border-radius: 20px;
  font-size: 16px;
}
.message-nav .message-nav-item {
  height: 100%;
}
.message-nav-item::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

</style>